<template>
<div class="chart-container" ref="chartRef"></div>
</template>

<script setup>
import {  ref,onMounted,watch } from 'vue';
import merge from 'lodash/merge'
import echarts from '../../plugins/echarts'
const props=defineProps(['option']);

//公共option
const commonOption={
  title: {
    left: "center",
    top: 10,
    textStyle: {
      color: "#fff",
      fontSize: 12,
      fontWeight: "bolder",
    },
  },
  xAxis: {
    axisLabel: {
      fontSize: 8,
      color: "rgba(255, 255, 255, 0.6)",
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255, .1)",
      },
    },
  },
  yAxis: {
    axisLabel: {
      fontSize: 8,
      color: "rgba(255, 255, 255, 0.6)",
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: "rgba(255, 255, 255, .1)",
      },
    },
    splitLine: {
      lineStyle: {
        color: "rgba(255, 255, 255, .1)",
      },
    },
  },
  grid: {
    containLabel: true,
    left: 10,
    right: 10,
    bottom: 10,
    top: 40,
  },
  tooltip: {
    backgroundColor: "rgba(0, 0, 0, .6)",
    textStyle: {
      color: "#fff",
      fontSize: 8,
    },
    borderWidth: 0,
    trigger: "axis",
  },
  legend: {
    top: 10,
    right: 5,
    textStyle: {
      fontSize: 8,
      color: "#fff",
    },
    itemWidth: 15,
    itemHeight: 8,
  },
};
const chartRef=ref();
let chartInstance
const renderEcharts=()=>{
  if(!chartInstance){
    chartInstance=echarts.init(chartRef.value);
  }
  const option=merge(commonOption,props.option);
  chartInstance.setOption(option);
};
onMounted(renderEcharts);
watch(()=>props.option,renderEcharts,{deep:true});
</script>

<style lang="scss" scoped>
.chart-container{
  width: 100%;
  height: 100%;
}
</style>